<template>
  <a-row :gutter="24">
    <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
      <chart-card title="放款金额" total="$126,560">
        <a-tooltip title="指标说明" slot="action">
          <a-icon type="info-circle-o" />
        </a-tooltip>
        <div>
          <Trend flag="up" style="margin-right: 16px;">
            <span slot="term">周同比</span>
            12%
          </Trend>
          <Trend flag="down">
            <span slot="term">日环比</span>
            11%
          </Trend>
        </div>
        <template slot="footer">日均放款金额<span>$ 234.56</span></template>
      </chart-card>
    </a-col>
    <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
      <chart-card title="收款金额" :total="8846">
        <a-tooltip title="收款金额" slot="action">
          <a-icon type="info-circle-o" />
        </a-tooltip>
        <div>
          <mini-area />
        </div>
        <template slot="footer">日均收款金额<span> {{ '1234' }}</span></template>
      </chart-card>
    </a-col>
    <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
      <chart-card title="逾期个数" :total="6560">
        <a-tooltip title="逾期个数" slot="action">
          <a-icon type="info-circle-o" />
        </a-tooltip>
        <div>
          <mini-bar />
        </div>
        <template slot="footer">逾期比率<span>60%</span></template>
      </chart-card>
    </a-col>
    <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
      <chart-card title="风险通过率" total="78%">
        <a-tooltip title="风险通过率" slot="action">
          <a-icon type="info-circle-o" />
        </a-tooltip>
        <div>
          <mini-progress color="rgb(19, 194, 194)" :target="80" :percentage="78" height="8px" />
        </div>
        <template slot="footer">
          <trend flag="down" style="margin-right: 16px;">
            <span slot="term">周同比</span>
            12%
          </trend>
          <trend flag="up">
            <span slot="term">日环比</span>
            80%
          </trend>
        </template>
      </chart-card>
    </a-col>
  </a-row>
</template>

<script>
import {
  ChartCard,
  Trend,
  MiniProgress,
  MiniBar,
  MiniArea,
} from '@/components'

export default {
  components: {
    ChartCard,
    Trend,
    MiniProgress,
    MiniBar,
    MiniArea,
  },
}
</script>
